<template>
  <view class="record">
    <!-- <view class="record-top"> -->
    <view class="search"
      ><image :src="search" @tap="onSearch(searchValue)" /><input
        type="text"
        confirm-type="search"
        placeholder="请输入消费券核销码"
        v-model="searchValue"
        @confirm="onSearch(searchValue)"
    /></view>
    <!-- </view>    value="{{time}}"-->
    <view class="screen">
      <view class="select" @tap="showstate = 1"
        >{{ query.q_use_dtt_s ? time(query.q_use_dtt_s) : "开始时间" }}
        <picker-time
          v-if="showstate == 1"
          :onChange="handStartTime"
          :date="pickerDate"
          :onCancel="() => (showstate = 0)"
        ></picker-time>
      </view>

      <view class="select" @tap="showstate = 2"
        >{{ query.q_use_dtt_e ? time(query.q_use_dtt_e) : "结束时间" }}
        <picker-time
          v-if="showstate == 2"
          :onChange="onEndTimeChange"
          :date="pickerDate"
          :onCancel="() => (showstate = 0)"
        ></picker-time>
      </view>
      <view class="select" @tap="showstate = 3"
        >{{ query.q_coupon_value || "金额"
        }}<view v-if="showstate == 3" style="display: grid">
          <view class="select-option" @tap.stop="onMoney('50')">50</view>
          <view class="select-option" @tap.stop="onMoney(30)">30</view>
          <view class="select-option" @tap.stop="onMoney(20)">20</view>
        </view>
      </view>
    </view>
    <view class="writeoff" :style="(showstate == 0||showstate == 3) ? '' : 'margin-top:720rpx'">
   
        <writeoff-list :data="data"></writeoff-list>
    
    </view>
  </view>
</template>

<script>
import "./index.scss";
import Vue from "vue";
import Taro from "@tarojs/taro";
import scan from "../../../assets/icon/scan.png";
import personicon from "../../../assets/icon/personicon.png";
import writeoffList from "../components/writeoffList/index";
import search from "../../../assets/icon/search.png";
import pickerTime from "./compents/pickerTime";
import requset from "../../../utils/request";
import formatTime from "../../../utils/formatTime";

export default {
  components: {
    "writeoff-list": writeoffList,
    "picker-time": pickerTime,
  },
  data() {
    return {
      data:[],

      pickerDate: {
        year: "2020",
        month: "1",
        day: "1",
      },
      scanicon: scan,
      search: search,
      showstate: 0,
      date: {
        year: "",
        month: "",
        day: "",
      },
      query: {
        q_use_dtt_s: "",
        q_use_dtt_e: "",
        q_coupon_value: "",
      },
      searchValue: "",
    };
  },
  computed: {
    // 计算属性的 getter
    years: function () {
      // `this` 指向 vm 实例
      const years = [];
      const date = new Date();
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i);
      }
      return years;
    },
  },
  mounted() {
    // console.log(this.onChange, "ee2ee");
    this.getList();
  },
  methods: {
    onSearch(searchValue) {
      console.log(searchValue, "searchValue");
      this.searchValue = searchValue;

      this.getList({ q_coupon_number: searchValue });
    },

    getList(params) {
      requset("get", "/api/rest/business_coupons.htm", {
        q_coupon_number: this.searchValue,
        ...params,
      }).then((res) => {
        this.data = res._list;
      });
    },

    handStartTime(x) {
      console.log(x, "handStartTime");
      this.query.q_use_dtt_s =
        new Date(`${x.year}/${x.month}/${x.day}`).getTime() / 1000;
      // this.time = x.detail.value;
      this.showstate = 0;
      //
      this.getList({
        ...this.query,
        q_use_dtt_s: new Date(`${x.year}/${x.month}/${x.day}`).getTime() / 1000,
      });
    },
    onEndTimeChange(x) {
      this.query.q_use_dtt_e =
        new Date(`${x.year}/${x.month}/${x.day}`).getTime() / 100;
      this.showstate = 0;
      // console.log(new Date(`${x.year}/${x.month}/${x.day}`).getTime()/100)

      this.getList({
        ...this.query,
        q_use_dtt_e: new Date(`${x.year}/${x.month}/${x.day}`).getTime() / 100,
      });
    },

    time(time) {
      return formatTime(time, "yyyy.mm.dd");
    },

    onMoney(value){

      this.showstate=0
      this.query.q_coupon_value = value
      this.getList({
        ...this.query,
        q_coupon_value: value,
      });
    }
  },
};
</script>
